<script setup lang="ts">
import { jumpToBlank } from '@/utils'

interface Props {
  url: string
  title: string
  target: string
}
const props = defineProps<Props>()

const handleContentJump = () => {
  jumpToBlank(props.target)
}
</script>

<template>
  <div
    class="content-card-class flex items-center p-1 ml-2 cursor-pointer"
    @click="handleContentJump"
  >
    <img :src="url" />
    <span class="ml-2 font-mono">{{ title }}</span>
  </div>
</template>

<style lang="scss" scoped>
.content-card-class {
  transition: all ease 0.2s;
  &:hover {
    color: #0788bf;
    border: 1px solid #e5e3e3;
  }
  border: 1px solid transparent;
  border-radius: 10px;
  img {
    @apply w-4 h-4;
  }
}
</style>
